<template>
<!-- Tab栏 教学点管理 -->
  <div>
      <div class="selectBtn">
        <div style="width: 400px;">
        <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
            <el-select style="width: 120px;" v-model="selects" slot="prepend" placeholder="请选择">
            <el-option label="教学点名称" value="name"></el-option>
            <el-option label="教学点地址" value="address"></el-option>
            <el-option label="联系人姓名" value="contactsName"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
        </el-input>
        </div>
      </div>
      <div style="margin-top: 24px;">
        <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
        <el-table-column prop="name" label="教学点名称" ></el-table-column>
        <el-table-column prop="address" label="教学点地址" ></el-table-column>
        <el-table-column prop="contactsName" label="联系人姓名" ></el-table-column>
        <el-table-column prop="contactsTel" label="联系人手机号" ></el-table-column>
        <el-table-column prop="reviewDate" label="申报时间" ></el-table-column>
        <el-table-column prop="reviewStatus" label="状态" ></el-table-column>
        <el-table-column label="操作">
           <template slot-scope="scope">
            <el-button type="text" @click="showLog(scope.row)">注销</el-button>
          </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
            type="flex"
            align="middle"
            justify="center"
            style="margin-top: 20px"
        >
            <el-col :span="5">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :current-page.sync="page.currentPage"
            ></el-pagination>
            </el-col>
        </el-row>
      </div>
      <el-dialog title="提示" :visible.sync="showDialog" width="30%" :before-close="handleClose">
        <span>是否提交注销申请</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false" style="margin-right:20px">取 消</el-button>
          <el-button type="primary" @click="cancelPoint">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { teachingSchool, cancelTeachingPoint } from '@/api'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      selects: '',
      search: '',
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      tableData: [],
      showDialog: false,
      selectPointId: 0
    }
  },
  created () {
    this.teachingSchool()
  },
  methods: {
    doSearch () {
      this.teachingSchool()
    },
    // 请求教学点列表数据
    async teachingSchool () {
      var data = { servicesId: localStorage.getItem('platform'), type: 2 }
      if (this.selects && this.search) {
        data[this.selects] = this.search
      }
      const ser = await teachingSchool(data)
      console.log(ser)
      if (ser?.code === 200) {
        const { list, total } = ser?.data
        console.log('大数组的数据', list)
        this.tableData = list
        this.tableData.forEach(element => {
          element.reviewDate = this.formatTime(element.reviewDate * 1000)
          switch (element.reviewStatus) {
            case 0:
              element.reviewStatus = '未通过'
              break
            case 1:
              element.reviewStatus = '待审核'
              break
            case 2:
              element.reviewStatus = '已通过'
              break
          }
        })
        this.page.total = total
      }
      this.exportBouncedsss = false
    },
    changePage () {

    },
    handleSizeChange () {
    },
    formatTime (item) {
      return this.$formatTime(item)
    },
    showLog (row) {
      this.selectPointId = row.id
      this.showDialog = true
    },
    cancelPoint () {
      this.showDialog = false
      this.doCancel()
    },
    async doCancel () {
      Message.error('')
      var data = { pointId: this.selectPointId }
      const ser = await cancelTeachingPoint(data)
      console.log(ser)
      if (ser?.code === 200) {
        Message.success('教学点注销申请提交成功')
        this.teachingSchool()
      }
    }
  }
}
</script>

<style lang="less">
    .el-button+.el-button {
        margin: 0;
    }
    .selectBtn {
        display: flex;
        margin-top: 15px;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }

</style>
